<template>
  <el-tabs type="border-card">
    <el-tab-pane label="比赛数据详情">
      比赛时间：<el-input v-model="listQuery.title" placeholder="比赛时间" style="width: 300px; margin-right:20px;" class="filter-item" @keyup.enter.native="handleFilter" />
      主场球队：<el-input v-model="listQuery.team" placeholder="主场球队" style="width: 300px; margin-right:20px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-table :data="tableData" height="450"  style="margin-top:30px; width: 100%">
        <el-table-column prop="matchTime" label="比赛时间" width="200">
        </el-table-column>
        <el-table-column prop="homeId" label="主场" width="200">
        </el-table-column>
        <el-table-column prop="unfamiliarId" label="客场" width="200"> </el-table-column>
        <el-table-column prop="homeScore" label="主场得分" width="200">
        </el-table-column>
        <el-table-column prop="unfamiliarScore" label="客场得分" width="200">
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "vuetest",
  data() {
    return {
      listQuery:{
        title:'',
        team:'',
      },
      listQuery1:{
        title:'',
        team:'',
      },
      listLoading: true,
      tableData: [{
      id:'',
      homeId: "",
      unfamiliarId: "",
      homeScore: '',
      unfamiliarScore: '',
      matchTime: ""
      }],
    };
  },
  created(){
    this.getList();
  },
  methods: {
    async handleFilter() {
      if(this.listQuery.title==''){
        this.listQuery1.title='null'
      }else{
        this.listQuery1.title=this.listQuery.title
      }
      if(this.listQuery.team==''){
        this.listQuery1.team='null'
      }else{
        this.listQuery1.team=this.listQuery.team
      }
      const { data: res } = await this.$http.get("http://8.140.184.55:8089/match/select_by_condition", {
        params: { date: this.listQuery1.title,name: this.listQuery1.team },
      });
      const a = res.data.length;
      if(res.code!=200){
        return this.$message.error("查询失败！");
      }
      if (a == 0) {
        return this.$message.error("查无此比赛，请重新输入！");
      }
      this.tableData=res.data
      this.$message.success("查询成功！");
      // this.listQuery.page = 1
      // this.getList()
    },
    async getList() {
      const { data: res } = await this.$http.get("http://8.140.184.55:8089/match/select_all");
      
      this.listLoading = true
      if(res.code==200){
          this.tableData = res.data
          this.total = res.data.length
          setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      }
      console.log(res.data);
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total

      //   // Just to simulate the time of the request
      //   setTimeout(() => {
      //     this.listLoading = false
      //   }, 1.5 * 1000)
      // })
    },
  },
};
</script>

